<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1090"
    >
      <template #tableTitle>
        <n-button type="primary" @click="addTable">
          <template #icon>
            <n-icon>
              <PlusOutlined />
            </n-icon>
          </template>
          新建
        </n-button>
      </template>

      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </BasicTable>

    <n-modal
      v-model:show="showModal"
      :show-icon="false"
      preset="dialog"
      :title="editTitle"
      class="width"
      style="width: 850px"
    >
      <n-card title="" style="margin-bottom: 14px">
        <n-tabs type="line" animated>
          <n-tab-pane name="message" tab="基本信息">
            <order-table :item="orderInfo" />
          </n-tab-pane>
          <n-tab-pane name="commodityMSG" tab="商品信息">
            <goods-table :orderId="orderInfo.id" />
          </n-tab-pane>
        </n-tabs>
      </n-card>
      <template #action>
        <n-space>
          <n-button @click="() => (showModal = false)">关闭</n-button>
          <!-- <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button> -->
        </n-space>
      </template>
    </n-modal>
  </n-card>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { useDialog, useMessage } from 'naive-ui';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import {
    getBlindBoxOrderPage,
    saveBlindBoxOrder,
    updateBlindBoxOrder,
    deleteBlindBoxOrder,
  } from '@/api/blindBox/blindBoxOrder';
  import { columns } from './lib/columns';
  import { PlusOutlined } from '@vicons/antd';
  import { ResultEnum } from '@/enums/httpEnum';
  import GoodsTable from './lib/components/GoodsTable.vue';
  import OrderTable from './lib/components/OrderTable.vue';
  import { Item } from './lib/components/OrderTable.vue';
  const schemas: FormSchema[] = [
    {
      field: 'blindBoxName',
      component: 'NInput',
      label: '盲盒名称',
      rules: [{ required: false }],
    },
    {
      field: 'memberMobile',
      component: 'NInput',
      label: '会员手机号',
      rules: [{ required: false }],
    },
    {
      field: 'memberName',
      component: 'NInput',
      label: '会员名称',
      rules: [{ required: false }],
    },
    {
      field: 'nickname',
      component: 'NInput',
      label: '会员昵称',
      rules: [{ required: false }],
    },
    {
      field: 'orderSn',
      component: 'NInput',
      label: '订单编号',
      rules: [{ required: false }],
    },
    {
      field: 'payTime',
      component: 'NInput',
      label: '支付时间',
      rules: [{ required: false }],
    },
    {
      field: 'status',
      component: 'NInput',
      label: '订单状态',
      rules: [{ required: false }],
    },
  ];

  const formRef: any = ref(null);
  const message = useMessage();
  const actionRef = ref();
  const showModal = ref(false);
  const formBtnLoading = ref(false);
  const checkedBlindBoxOrderId = ref(); //当前编辑id
  const isEdit = ref(false); // 弹出框是否为编辑
  const editTitle = ref('');
  const orderInfo = ref({} as Item);
  // const dialog = useDialog();
  const formParams = reactive({
    id: null,
    orderSn: '',
    blindBoxId: '',
    memberId: '',
    blindBoxNum: '',
    price: '',
    status: '',
    paymentOrderNo: '',
    payTime: '',
    createTime: '',
  });
  const formParamsBak = { ...formParams };

  const params = ref({});

  const actionColumn = reactive({
    width: 220,
    title: '操作',
    key: 'action',
    fixed: 'right',
    render(record) {
      return h(TableAction as any, {
        style: 'button',
        actions: [
          {
            label: '订单详情',
            onClick: handleEdit.bind(null, record),
          },
          // {
          //   label: '删除',
          //   icon: 'ic:outline-delete-outline',
          //   onClick: handleDelete.bind(null, record),
        ],
      });
    },
  });

  const [register, {}] = useForm({
    gridProps: { cols: '2 s:1 m:2 l:2 xl:4 2xl:6' },
    labelWidth: 100,
    schemas,
  });

  function addTable() {
    // 新增清空表单
    Object.assign(formParams, formParamsBak);
    isEdit.value = false;
    showModal.value = true;
    editTitle.value = '新建';
  }

  const loadDataTable = async (res) => {
    return await getBlindBoxOrderPage({ ...params.value, ...res });
  };
  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  function reloadTable() {
    actionRef.value.reload();
  }
  
  function handleEdit(record: Recordable) {
    console.log('点击了编辑', record);
    // const time = record.createTime * 1000;
    // record.createTime = formatToDateTime(time);
    orderInfo.value = record;
    checkedBlindBoxOrderId.value = record.id;
    Object.assign(formParams, record);
    editTitle.value = '订单详情';
    showModal.value = true;
    isEdit.value = true;
  }

  // function handleDelete(record: Recordable) {
  //   console.log('点击了删除', record);
  //   dialog.info({
  //     title: '提示',
  //     content: `您确定想删除吗?`,
  //     positiveText: '确定',
  //     negativeText: '取消',
  //     onPositiveClick: async () => {
  //       const params = { id: record.id };
  //       const response = await deleteBlindBoxOrder(params);
  //       const { message: msg, code } = response;
  //       if (code == ResultEnum.SUCCESS) {
  //         message.success(msg);
  //         reloadTable();
  //       } else {
  //         message.error(msg);
  //       }
  //     },
  //     onNegativeClick: () => {
  //       message.error('已取消');
  //     },
  //   });
  // }

  function handleSubmit(values: Recordable) {
    console.log(values);
    params.value = values;
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log(values);
  }
</script>

<style lang="less" scoped></style>
